<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            font-family: "Microsoft YaHei UI";
            font-size: 14px;
            color: #666666;
            background-color: #00d7c6 ;
        }

        .loginForm{
            box-sizing: border-box;
            padding: 10px 15px;
            width: 500px;
            min-height: 200px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 20px;
            box-shadow: 0 0 20px #5c5c5c;
        }
        .loginForm .menu{
            list-style: none;
            text-align: center;
            padding: 10px 0;
            font-size: 16px;

        }

        .loginForm .menu li{
            font-size: 16px;
            padding-bottom:10px;
            width: 31%;
            display: inline-block;
            border-bottom: 1px solid #d5d5d5;
        }

        .loginForm .menu li.active{
            border-bottom: 1px solid #00d7c6;
        }

        .loginForm .field input{
            border: 1px solid #bbb;
            padding: 10px 20px;
            width: 93%;
            box-sizing: border-box;
            display: block;
            margin: 10px auto;
        }

        .loginForm .action button{
            width: 93%;
            padding: 10px 0;
            background-color: #00d7c6;
            color: white;
            font-size: 17px;
            border: none;
            border-radius: 10px;
            display: block;
            margin: 10px auto;
        }

        .foot .left img{
            float: left;
            padding: 8px 0 15px 15px;
        }

        .foot .left span{
            font-size: 14px;
            color: #999999;
            padding: 15px 0 15px 0;
            float: left;
        }



        .foot .right span{
            font-size: 14px;
            color: #999999;
            float: right;
            padding: 15px 18px 15px 0;
        }

        .foot .right a{
            font-size: 14px;
            color: #00d7c6;
            text-decoration:none;
            float: right;
            padding: 15px 18px 15px 0;
        }

    </style>
</head>
<body>

<form class="loginForm">
    <ul class="menu">
        <li class="active">密码登录</li>
        <li>短信登录</li>
        <li>扫码登录</li>
    </ul>

    <div class="field">
        <input placeholder="手机号">
    </div>

    <div class="field">
        <input type="password" placeholder="密码">
    </div>

    <div class="action">
        <button type="button">登录</button>
    </div>

    <div class="foot">
        <div class="left">
            <img src="123.png">
            <span>微信登录</span>
        </div>
        <div class="right">
            <a href="#">立即注册</a>
            <span>没有账户</span>
        </div>
    </div>
</form>

</body>
</html>
